<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin: 0;padding: 0}
        #app{margin: 200px}
        /*元素一开始的状态 = 元素显示时的状态(v-enter-to)*/
        .test{
            width: 200px;
            height: 200px;
            background:pink;
        }




        /*隐藏状态*/
        .test-enter{
            opacity: 0;
            background: black;
        }
        .test-enter-active{
            /*可动画的属性*/
            transition:3s all;
        }
        /*显示状态*/
        .test-enter-to{
            opacity: 1;
            background: pink;
        }

        /*显示状态 拿的元素一开始的状态*/
        .test-leave-active{
            /*可动画的属性*/
            transition:3s all;
        }
        /*隐藏状态*/
        .test-leave-to{
            opacity: 0;
            background: black;
        }

    </style>
</head>
<body>
    <div id="app">
        <button @click="show=!show">switch</button>
        <transition name="test">
            <div v-show="show" class="test"></div>
        </transition>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>

    /*
        使用vue的过渡动画得满足三个条件
            1. 要过渡的元素 必须使用上v-show 或 v-if
            2. 要过渡的元素 必须具备transition
            3. 要过渡的元素 必须被<transition></transition>组件进行包裹

            只要元素被transition组件包裹了,那么在元素产生显示与隐藏切换时会自动加上
            一系列的class
                从隐藏变为显示状态时自动给对应元素添加:v-enter v-enter-active  v-enter-to
                    从隐藏变为显示的第一帧 会加上v-enter
                    从隐藏变为显示的第二帧到最后一帧 会加上v-enter-active  v-enter-to
                从显示变为隐藏状态时自动给对应元素添加:v-leave v-leave-active  v-leave-to
                    从显示变为隐藏的第一帧 会加上v-leave(假的 不会加 尤雨溪因为好看留了这个api)
                    从显示变为隐藏的第二帧到最后一帧 会加上v-leave-active  v-leave-to

    */

    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{show:true}
    })
</script>
</html>